<template>
  <!-- 可以没有根标签 -->
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div>name: {{ file.name }}</div>
  <div>age: {{ file.age }}</div>
  <div>{{ file.obj.type }} - {{ file.obj.str }}</div>
  <button @click="setAttr">点击change</button>
  <hr>

  <HomeBox v-if="false" msg="hi msg" @changeMsg="handleMsg">
    <template v-slot:kiss>
      <span>children</span>
    </template>
  </HomeBox>
  <SumBox v-else-if="false" />
  <EffectBox v-if="false" />
  <div v-if="false">
    <button @click="isShowCycle = !isShowCycle">组件周期测试</button>
    <CycleBox v-if="isShowCycle" />
  </div>
  <div>
    <CustomHooks />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import HomeBox from './views/home/index.vue'
import SumBox from './views/home/sum.vue'
import EffectBox from './views/home/effect.vue'
import CycleBox from './views/home/cycle.vue'
import CustomHooks from './views/com/customHooks.vue'
import {
  h,
  ref,
  reactive,
  toRef
} from 'vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    HomeBox,
    SumBox,
    EffectBox,
    CycleBox,
    CustomHooks
  },
  setup() {
    // const name = ref('tom')
    // const age = ref(12)
    // const obj = ref({
    //   type: 'state',
    //   str: 'str'
    // })
    const isShowCycle = ref(true)
    const file = reactive({
      options: {
        user: 'data'
      },
      hobby: [1, 2, 3],
      age: 12,
      name: 'tom',
      obj: {
        type: 'state',
        str: 'str'
      }
    })
    // const hobby = reactive([1, 2, 3])
    function setAttr() {
      file.name = 'jack'
      file.age = 22
      file.obj.type = 'status'
      console.log(file.options, file.hobby[0] = 111)
    }
    function handleMsg(val) {
      console.log(val)
    }
    return {
      // name,
      // age,
      // obj,
      // hobby,
      isShowCycle,
      file,
      setAttr,
      handleMsg
    }
    // return () => {
    //   return h('h1', 'dingdingdang')
    // }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
